<template>
  <div class="serviceSetting">
    <!-- <h1>服务器设置</h1> -->
    <div class="flex-start ">
      <list type="appsmall" tittle="服务器设置" :color="color" @xiugai="xiugai">
        <!-- <div v-if="state === 0">
          <div class="name flex-start">
            <div class="left">服务器名称</div>
            <div class="right">
              <input
                type="text"
                class="searchInput"
                placeholder="请输入服务器名称"
              />
            </div>
          </div>
          <div class="password flex-start">
            <div class="left">密码</div>
            <div class="right">
              <input type="text" class="searchInput" placeholder="请输入密码" />
            </div>
          </div>
          <div class="btns flex-start">
            <div class="btn-white2">重置</div>
            <div class="btn-blue2" @click="login">登录</div>
          </div>
        </div> -->
        <login v-if="state === 0" @login="login"></login>
        <info v-if="state === 1" @signout="signout"></info>
        <password v-if="state === 2" @save="save" @cancel="cancel"></password>

        <!-- <div v-if="state === 1">
          <div class="name flex-start">
            <div class="left">服务器名称</div>
            <div class="right">
              <input
                type="text"
                class="searchInput"
                placeholder="请输入服务器名称"
              />
            </div>
          </div>
          <div class="password flex-start">
            <div class="left">状态</div>
            <div class="right">
              <input type="text" class="searchInput" placeholder="请输入密码" />
            </div>
          </div>
          <div class="password flex-start">
            <div class="left">地址</div>
            <div class="right">
              <input type="text" class="searchInput" placeholder="请输入密码" />
            </div>
          </div>
          <div class="btns flex-start">
            <div class="btn-blue2 signout" @click="signout">退出</div>
          </div>
        </div> -->

        <!-- <div v-if="state === 2">
          <div class="name flex-start">
            <div class="left">旧密码</div>
            <div class="right">
              <input
                type="text"
                class="searchInput"
                placeholder="请输入服务器名称"
              />
            </div>
          </div>
          <p>请输入密码</p>
          <div class="password flex-start">
            <div class="left pwd">新密码</div>

            <div class="right">
              <input type="text" class="searchInput" placeholder="请输入密码" />
            </div>
          </div>

          <div class="password flex-start">
            <div class="left">确认密码</div>
            <div class="right">
              <input type="text" class="searchInput" placeholder="请输入密码" />
            </div>
          </div>
          <div class="btns flex-start">
            <div class="btn-white2">取消</div>
            <div class="btn-blue2" @click="signout">保存</div>
          </div>
        </div> -->
      </list>
      <div class="serviceList">
        <div class="head">
          <div class="tittle"><span>服务器列表</span></div>
          <div class="search flex-start">
            <div class="mingchen">
              <label for="">服务器名称</label
              ><input
                class="searchInput"
                type="text"
                placeholder="请输入服务器名称"
              />
            </div>
            <div class="type">
              <label for="">服务器类型</label
              ><input
                @focus="flag = false"
                @blur="blur"
                class="searchInput"
                type="text"
                placeholder="请输入服务器类型"
                v-model="type"
              />
              <div @click="flag = !flag" class="pic">
                <img :src="imgurl" alt="" />
              </div>
              <ul v-show="flag === false" class="options">
                <li v-for="item in options" :key="item" @click="choice(item)">
                  {{ item }}
                </li>
              </ul>
            </div>
            <div class="btnbox flex-start">
              <div class="btn-white2 cp">重置</div>
              <div class="btn-blue2 cp">查询</div>
            </div>
          </div>
        </div>
        <div class="data">
          <div class="btn flex-end">
            <div class="btn-white2" @click="add">添加</div>
          </div>
          <!-- 添加 -->
          <mid-dialog
            title="添加"
            v-show="midDialog === true"
            @close="midDialog = false"
          >
            <div class="app">
              <div class="mingchen flex-start">
                <label><span class="c-error">*</span>服务器名称</label>
                <input class="searchInput" placeholder="请输入服务器名称" />
              </div>

              <div class="address flex-start">
                <label><span class="c-error">*</span>服务器地址</label>
                <input class="searchInput" placeholder="请输入服务器地址" />
              </div>

              <div class="type">
                <label for=""><span class="c-error">*</span>服务器类型</label
                ><input
                  @focus="addFlag = false"
                  class="searchInput select"
                  type="text"
                  placeholder="请输入服务器类型"
                  v-model="addType"
                />
                <div @click="addFlag = !addFlag" class="pic">
                  <img :src="imgurl2" alt="" />
                </div>
                <ul v-show="addFlag === false" class="options">
                  <li
                    v-for="item in options"
                    :key="item"
                    @click="addChoice(item)"
                  >
                    {{ item }}
                  </li>
                </ul>
              </div>
              <div class="btns flex-start">
                <div class="btn-white2">取消</div>
                <div class="btn-blue2">保存</div>
              </div>
            </div>
          </mid-dialog>

          <table class="Datatable">
            <thead>
              <tr>
                <th>版本号</th>
                <th>app文件</th>
                <th>添加时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody v-if="tableDataAll.length != 0">
              <tr v-for="item in tableData" :key="item.id">
                <td>
                  {{ item.id }}
                </td>

                <td>{{ item.name }}</td>
                <td>{{ item.time }}</td>

                <td class="operation">
                  <span class="ck cp download" @click="edit(item.id)"
                    >编辑</span
                  >
                  <promptBox
                    @cancel="promptBoxId = 0"
                    @confirm="confirm(item.id)"
                    v-show="promptBoxId === item.id"
                  ></promptBox>
                  <span class="ck cp delete" @click="promptBox(item.id)"
                    >删除</span
                  >
                </td>
              </tr>
            </tbody>
            <tbody v-else>
              <tr>
                <td colspan="4">暂无数据</td>
              </tr>
            </tbody>
          </table>
          <div class="flex-end fenye">
            <el-pagination
              v-if="tableDataAll.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="10"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableDataAll.length"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import list from '../components/list'
import promptBox from './components/promptBox'
import login from './components/state0'
import info from './components/state1'
import password from './components/state2'
import imgSrc1 from '@/assets/dropDown.png'
import imgSrc2 from '@/assets/pullUp.png'

export default {
  components: {
    list,
    promptBox,
    login,
    info,
    password
  },

  data () {
    return {
      currentPage: 1,
      size: 10,
      checkboxList: [],
      checked: false,
      visible: false,
      text: '',
      tipindex: 0,
      promptBoxId: 0,
      color: 'gray', // 修改按钮的颜色
      state: 0, // 当前是否登录的状态 0未登录，1登录，2修改
      flag: true,
      type: '', // 服务器类型
      options: ['陌上人如玉', '公子世无双'],
      midDialog: false,
      addFlag: true,
      addType: ''
    }
  },
  computed: {
    tableData () {
      return []
    },
    tableDataAll () {
      return []
    },
    imgurl () {
      if (this.flag === true) {
        return imgSrc1
      } else {
        return imgSrc2
      }
    },

    imgurl2 () {
      if (this.addFlag === true) {
        return imgSrc1
      } else {
        return imgSrc2
      }
    }
  },

  methods: {
    blur () {
      setTimeout(() => {
        this.flag = true
      }, 200)
    },
    handleCurrentChange (val) {
      this.currentPage = val
    },
    handleSizeChange (size) {
      this.size = size
    },
    // checkedAll () {
    //   // console.log(this.checked)
    //   if (this.checked) {
    //     // 实现反选
    //     this.checkboxList = []
    //   } else {
    //     // 实现全选
    //     this.checkboxList = []
    //     this.tableData.forEach((item) => {
    //       this.checkboxList.push(item.id)
    //     })
    //   }
    // },
    promptBox (id) {
      this.promptBoxId = id
    },
    edit (id) {
      alert(id)
    },
    // 点击按钮确认之后的操作
    confirm (id) {
      this.promptBoxId = 0
      alert(id)
      // 后续操作
    },

    searchDetail (id) {
      alert(id)
      this.$router.push({
        path: `/cfManagedetail/${id}`
      })
    },
    showtip (id) {
      this.tipindex = id
    },
    login () {
      this.state = 1
      this.color = 'blue'
    },
    signout () {
      this.state = 0
      this.color = 'gray'
    },
    xiugai () {
      this.state = 2
      this.color = 'gray'
    },
    save () {
      this.state = 0
      this.color = 'gray'
    },
    cancel () {
      this.state = 1
      this.color = 'blue'
    },
    choice (val) {
      this.type = val
      this.flag = true
    },
    add () {
      this.midDialog = true
    },
    addChoice (val) {
      this.addType = val
      this.addFlag = true
    }
  },
  watch: {
    // 深度 watcher
    // checkboxList: {
    //   handler: function (val, oldVal) {
    //     if (this.checkboxList.length === this.tableData.length) {
    //       this.checked = true
    //     } else {
    //       this.checked = false
    //     }
    //   },
    //   deep: true
    // }
  }
}
</script>

<style lang="scss" scoped>
.serviceList {
  width: 1112px;
  // min-height: 934px;
  // height: 100%;
  // margin-top: 20px;
  margin-left: 20px;
  height: 100%;
  // .fenye {
  //   margin-bottom: 177px;
  // }
  .head {
    width: 100%;
    height: 160px;
    background-color: #fff;
    border-radius: 8px;
    padding: 0 24px;
  }
  .tittle {
    height: 80px;
    border-bottom: 1px solid #e6e9f0;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    color: #1b1f35;
    span {
      position: absolute;
      bottom: 20px;
    }
  }
  .search {
    height: 80px;
    position: relative;
    label {
      margin-right: 12px;
    }
    .mingchen {
      margin-left: 24px;
    }
  }
  .btnbox {
    height: 100%;
    width: 198px;
    position: absolute;
    right: 0px;
    .btn-white2 {
      margin-right: 20px;
    }
  }
  .data {
    min-height: 754px;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 8px;
    padding: 0 24px 177px;
    // position: absolute;
    .btn {
      // margin-top: 12px;
      .btn-white2 {
        width: 100px;
        margin-top: 12px;
      }
    }
  }
  .type {
    margin-left: 20px;
  }
  table {
    margin-top: 22px;
    th,
    td {
      &:nth-child(1) {
        width: 220px;
      }
      &:nth-child(2) {
        width: 120px;
      }
      &:nth-child(3) {
        width: 306px;
      }
      &:nth-child(4) {
        width: 414px;
      }
    }
    .operation {
      position: relative;
      overflow: visible;
    }
  }
  .app {
    text-align: center;
    .mingchen {
      display: inline-block;
      margin-top: 112px;
      label {
        margin-right: 20px;
      }
    }
    .address {
      display: inline-block;
      margin-top: 20px;
      label {
        margin-right: 20px;
      }
    }
    .type {
      display: inline-block;
      margin-top: 20px;
      margin-left: 0px;
      label {
        margin-right: 20px;
      }
      li {
        text-align: left;
      }
    }
    .btns {
      margin-top: 90px;
      .btn-white2 {
        width: 100px;
        margin-left: 156px;
        margin-right: 20px;
      }
      .btn-blue2 {
        width: 100px;
      }
    }
  }
}
</style>
